<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <link rel="stylesheet" href="css/game_hall.css">
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="layui-row">
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1">
            <div><img src="image/博弈.png" alt="">五子棋对战</div>
        </div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo grid-demo-bg1"></div>
    </div>
    <div class="layui-col-sm3">
        <div class="grid-demo">
            <a href="login.html">
                <img src="image/logout.png" alt="">退出登录
            </a>
        </div>
    </div>
</div>


<div class="container">
   <div>
       <!-- 用户信息   -->
       <div id="screen">

       </div>
       <!--  匹配按钮  -->
       <div id="match-button">开始匹配</div>
   </div>
</div>

<script src="js/jquery.js"></script>
<script>
    <!--  获取登陆用户的的信息  -->
    $.ajax({
        type: 'get',
        url: '/userInfo',
        success: function (body) {
            let screen = document.querySelector('#screen');
            screen.innerHTML = '玩家: '+ body.username + ' 分数: '+ body.score + "<br>" +
                "比赛场次: " +body.totalCount + " 获胜场次: "+body.winCount;
        },
        error: function () {
            console.log("获取用户信息失败!");
        }
    });
    // 匹配逻辑
    // 1. 和服务器建立连接. 路径要写作 /findMatch, 不要写作 /findMatch/
    let websocket = new WebSocket('ws://127.0.0.1:8080/findMatch');
    // 2. 点击开始匹配
    let button = document.querySelector('#match-button');
    button.onclick = function() {
        if (websocket.readyState === websocket.OPEN) {
            if (button.innerHTML === '开始匹配') {
                console.log('开始匹配!');
                websocket.send(JSON.stringify({
                    message: 'startMatch',
                }));
            } else if (button.innerHTML === '匹配中...(点击取消)') {
                console.log('取消匹配!');
                websocket.send(JSON.stringify({
                    message: 'stopMatch'
                }));
            }
        } else {
            alert('当前您连接断开! 请重新登录!');
            location.assign('/login.html');
        }
    }

    // 3. 处理服务器的响应
    websocket.onmessage = function(e) {
        let resp = JSON.parse(e.data)
        if (!resp.ok) {
            console.log('游戏大厅中发生错误: ' + resp.reason);
            location.assign('/login.html');
            return;
        }
        if (resp.message === 'startMatch') {
            console.log('进入匹配队列成功!');
            button.innerHTML = '匹配中...(点击取消)';
        } else if (resp.message === 'stopMatch') {
            console.log('离开匹配队列成功!');
            button.innerHTML = '开始匹配';
        } else if (resp.message === 'matchSuccess') {
            console.log('匹配成功! 进入游戏页面!');
            location.assign('/game_room.html');
        } else {
            console.log('非法的 message: ' + resp.message);
        }
    }

    // 4. 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }
</script>
</body>
</html>